<template>
  <div>
    <el-tooltip :content="$t('msg.navBar.guide')">
      <svg-icon id="guide-start" icon="guide" @click="onClick" />
    </el-tooltip>
  </div>
</template>

<script setup>
  import Driver from 'driver.js'
  import 'driver.js/dist/driver.min.css'
  import { onMounted } from 'vue'
  import { useI18n } from 'vue-i18n'
  import steps from './steps'

  const i18n = useI18n()

  let driver = null
  onMounted(() => {
    driver = new Driver({
      // 禁止点击蒙版关闭
      allowClose: false,
      closeBtnText: i18n.t('msg.guide.close'),
      nextBtnText: i18n.t('msg.guide.next'),
      prevBtnText: i18n.t('msg.guide.prev'),
    })
  })
  const onClick = () => {
    driver.defineSteps(steps(i18n))
    driver.start()
  }
</script>

<style scoped></style>
